<template>
	<el-container>
		<el-header>
			<el-form :inline="true">
				<el-form-item label="">
					<el-cascader
						v-model="form.langs"
						:options="langsList"
						:props="langsProps"
						:show-all-levels="false"
						clearable
						style="width: 100%"
						placeholder="请选择语言"
						@change="langChange"
					></el-cascader>
				</el-form-item>
				<el-form-item>
					<el-button
						type="primary"
						icon="el-icon-position"
						@click="runBtn"
						>运行</el-button
					>
				</el-form-item>
			</el-form>
		</el-header>
		<el-row class="container-row">
			<el-col :span="12"
				><div class="the-code-editor-container" ref="container"></div
			></el-col>
			<el-col :span="12"><div class="code-editor-result"></div></el-col>
		</el-row>
	</el-container>
</template>

<script>
import * as monaco from "monaco-editor";
export default {
	name: "monacoIde",
	props: {
		//根据传过来的数据来设置编辑器语言
		lang: {
			type: String,
			default: "java",
		},
		// 根据传过来的数据来设置编辑器的值
		codes: {
			type: String,
			default: "",
		},
		editorOptions: {
			type: Object,
			default: function () {
				return {
					selectOnLineNumbers: true,
					roundedSelection: false,
					readOnly: false,
					cursorStyle: "line",
					automaticLayout: false,
					glyphMargin: true,
					useTabStops: false,
					fontSize: 28,
					autoIndent: false,
				};
			},
		},
	},
	data() {
		return {
			monacoEditor: null,
			editor: null,
			editorValue: "123131213",
			editorShow: true,
			val: "",
			//lang: "java",
			form: {
				langs: [],
			},
			langsList: [],
			langsProps: {
				value: "lang",
				emitPath: false,
				// checkStrictly: true,
				label: "text",
			},
		};
	},
	mounted() {
		this.renderEditor();
		this.renderLangs();
	},
	methods: {
		renderEditor() {
			this.monacoEditor = monaco.editor.create(this.$refs.container, {
				value: this.codes,
				language: "python",
				theme: "vs-dark",
				editorOptions: this.editorOptions,
			});
			// 监听内容变化
			this.monacoEditor.onDidChangeModelContent(() => {
				let val = this.monacoEditor.getValue();
				console.log("val is :", val);
			});
		},
		init() {
			// 初始化编辑器
			this.editor = monaco.editor.create(this.$refs.editor, {
				value: this.editorValue, // 编辑器初始显示文字
				theme: "CodeSampleTheme", // 官方自带三种主题vs, hc-black, or vs-dark
				//language: this.lang, // 语言支持自行查阅demo
				overviewRulerBorder: false, // 滚动是否有边框
				automaticLayout: true, // 自动布局
				readOnly: false, // 是否只读
				minimap: {
					// 关闭代码缩略图
					enabled: false, // 是否启用预览图
				},
				lineNumbers: "on", // 控制行号的显隐
				scrollBeyondLastLine: false, // 禁用额外滚动区
				scrollbar: {
					verticalScrollbarSize: 4, // 垂直滚动条宽度，默认px
					horizontalScrollbarSize: 4, // 水平滚动条高度
				},
				contextmenu: false, // 禁用右键菜单
			});
			// // 自定义主题背景色
			// monaco.editor.defineTheme("CodeSampleTheme", {
			// 	base: "vs",
			// 	inherit: true,
			// 	rules: [{ background: "#F6F6F7" }],
			// 	colors: {
			// 		// 相关颜色属性配置
			// 		"editor.background": "#F6F6F7", // 背景色
			// 	},
			// });
			// 监听内容变化
			// this.editor.onDidChangeModelContent(() => {});
			// // // 监听失去焦点事件
			// this.editor.onDidBlurEditorText((e) => {
			// 	console.log(e);
			// });
			//this.editor.setValue("12313123");
		},
		async setEditorValue(data) {
			// var currentModel = this.editor.getModel();
			// const newModel = monaco.editor.createModel(
			// 	data, // 值
			// 	this.lang // 语言
			// );
			// this.editor.setModel(newModel);
			// this.editor.updateOptions({
			// 	value: data,
			// });
			this.editor.setValue(data);
			//monaco.editor.setValue(data);
			// if (currentModel) {
			// 	currentModel.dispose();
			// }
			// console.log(newModel);
			// this.editor.setModel(newModel);
			// monaco.editor.setModelLanguage(newModel, this.lang);
			//this.editor.setModel(newModel);
			// this.editor.setModelLanguage(newModel, this.lang);
			// 设置自定义的主题背景色
			//monaco.editor.setTheme("CodeSampleTheme");
			// 获取monaco编辑器的值
			// this.editorValue = this.editor.getValue();
			// if (this.editorValue) {
			// 	this.editorShow = true;
			// }
		},
		runBtn() {},
		async renderLangs() {
			var res = await this.$API.webide.langs.get();
			this.langsList = res.data;
		},
		async langChange(data) {
			console.log("lang change data :", data);
			console.log("进入循环");
			this.langsList.forEach(async (item) => {
				console.log("进入循环开始");
				if (item.lang == data) {
					//this.lang = data;
					//this.editorValue = item.examples;
					console.log("找到了值", item);
					//item.examples
					//await this.setEditorValue(item.examples);
					// this.editor.dispose();
					// this.init();
					return;
					//
				}
			});
			console.log("退出循环");
		},
	},
	watch: {
		editorOptions: {
			handler() {
				this.$nextTick(() => {
					this.monacoEditor.updateOptions(this.editorOptions);
				});
			},
			deep: true,
		},
	},
};
</script>
<style scoped lang="scss">
.the-code-editor-container,
.code-editor-result {
	width: 100%;
	min-height: 100px;
	height: 100%;
	overflow: auto;
}

.code-editor-result {
	background-color: white;
}
.container-row {
	width: 100%;
	height: 100%;
}
</style>
